import React, { useRef, useEffect, useState } from 'react';
// import { GPU } from 'gpu.js';

interface GreenScreenVideoProps {
  src: string;
  width?: number;
  height?: number;
  backgroundColor?: [number, number, number]; // 背景色，默认[238, 243, 252]淡蓝色
  threshold?: number; // 容差，默认30
  edgePadding?: number; // 边缘透明区域宽度，默认0
  maintainAspectRatio?: boolean; // 是否保持宽高比，默认true
  autoFit?: boolean; // 是否自动适应内容区域，默认false
  useGPU?: boolean; // 是否使用GPU加速，默认true
  style?: React.CSSProperties;
  className?: string;
}

const GreenScreenVideo: React.FC<GreenScreenVideoProps> = ({
  src,
  width = 640,
  height = 360,
  backgroundColor = [238, 243, 252], // 默认淡蓝色背景
  threshold = 30,
  edgePadding = 0,
  maintainAspectRatio = true,
  autoFit = false,
  useGPU = true,
  style,
  className,
}) => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  // const gpuRef = useRef<GPU>();
  const [isVideoReady, setIsVideoReady] = useState(false);
  const [contentBounds, setContentBounds] = useState<{ x: number; y: number; width: number; height: number } | null>(null);
  
  // 性能优化相关
  const inputArrayRef = useRef<number[][][]>([]);
  const outFrameRef = useRef<ImageData | null>(null);
  const lastFrameTimeRef = useRef(0);
  const frameCountRef = useRef(0);
  const [currentFPS, setCurrentFPS] = useState(0);

  // useEffect(() => {
  //   gpuRef.current = new GPU({ mode: 'cpu' }); // 强制使用 CPU 后端，兼容 JS 数组输入
  //   return () => {
  //     gpuRef.current?.destroy();
  //   };
  // }, []);

  useEffect(() => {
    const video = videoRef.current;
    const canvas = canvasRef.current;
    if (!video || !canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 创建纯JavaScript的高性能背景过滤函数
    const processFrameJS = (imageData: ImageData) => {
      const data = imageData.data;
      const newData = new Uint8ClampedArray(data.length);
      
      // 直接复制数据，避免创建新对象
      newData.set(data);
      
      // 预计算阈值，避免重复计算
      const threshold3 = threshold * 3;
      const [targetR, targetG, targetB] = backgroundColor;
      
      for (let i = 0; i < data.length; i += 4) {
        const x = (i / 4) % width;
        const y = Math.floor((i / 4) / width);
        
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        
        // 边缘透明区域
        if (edgePadding > 0 && (x < edgePadding || x >= width - edgePadding || y < edgePadding || y >= height - edgePadding)) {
          newData[i + 3] = 0;
          continue;
        }
        
        // 使用曼哈顿距离，提高性能
        const dist = Math.abs(r - targetR) + Math.abs(g - targetG) + Math.abs(b - targetB);
        
        // 如果距离小于阈值，设为透明
        if (dist < threshold3) {
          newData[i + 3] = 0;
        }
      }
      
      return new ImageData(newData, width, height);
    };

    // 创建 kernel（仅在useGPU为true时）
    let kernel: any = null;
    // if (useGPU) {
    //   kernel = gpuRef.current?.createKernel(function (
    //   frame: number[][][],
    //   targetR: number,
    //   targetG: number,
    //   targetB: number,
    //   threshold: number,
    //   edgePadding: number
    // ) {
    //   const pixel = frame[this.thread.y][this.thread.x];
    //   const r = pixel[0];
    //   const g = pixel[1];
    //   const b = pixel[2];
    //   const a = pixel[3];
    //   const x = this.thread.x;
    //   const y = this.thread.y;
    //   const width = this.output.x;
    //   const height = this.output.y;
      
    //   // 边缘透明区域
    //   if (edgePadding > 0 && (x < edgePadding || x >= width - edgePadding || y < edgePadding || y >= height - edgePadding)) {
    //     return [r, g, b, 0];
    //   }
      
    //   // 计算与目标色的欧氏距离
    //   const dist = Math.sqrt(
    //     (r - targetR) * (r - targetR) +
    //     (g - targetG) * (g - targetG) +
    //     (b - targetB) * (b - targetB)
    //   );
      
    //   // 如果距离小于阈值，设为透明
    //   if (dist < threshold) {
    //     return [r, g, b, 0]; // 透明
    //   }
      
    //   // 额外的绿幕检测逻辑（针对绿色背景）
    //   if (targetG > targetR && targetG > targetB) {
    //     // 如果是绿色背景，使用更严格的绿幕检测
    //     if (g > 50 && g > r * 1.2 && g > b * 1.2) {
    //       return [r, g, b, 0]; // 透明
    //     }
    //   }
      
    //   return [r, g, b, a];
    // })
    //   .setOutput([width, height])
    //   .setPipeline(false); // 关闭 pipeline，兼容 JS 数组输入
    // }

    let animationId: number;
    let isRendering = false;

    // 计算内容区域（非透明区域）
    const calculateContentBounds = (imageData: ImageData) => {
      const data = imageData.data;
      let minX = width, minY = height, maxX = 0, maxY = 0;
      let hasContent = false;

      for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
          const idx = (y * width + x) * 4;
          const alpha = data[idx + 3];
          
          if (alpha > 0) { // 非透明像素
            minX = Math.min(minX, x);
            minY = Math.min(minY, y);
            maxX = Math.max(maxX, x);
            maxY = Math.max(maxY, y);
            hasContent = true;
          }
        }
      }

      if (hasContent) {
        return {
          x: minX,
          y: minY,
          width: maxX - minX + 1,
          height: maxY - minY + 1
        };
      }
      return null;
    };

    const render = () => {
      const now = performance.now();
      
      // FPS计算
      frameCountRef.current++;
      if (now - lastFrameTimeRef.current >= 1000) {
        setCurrentFPS(frameCountRef.current);
        frameCountRef.current = 0;
        lastFrameTimeRef.current = now;
      }

      if (!isVideoReady || video.paused || video.ended) {
        if (isRendering) {
          isRendering = false;
          cancelAnimationFrame(animationId);
        }
        return;
      }

      if (!isRendering) {
        isRendering = true;
      }

      try {
        ctx.drawImage(video, 0, 0, width, height);
        const frame = ctx.getImageData(0, 0, width, height);
        
        let processedFrame: ImageData;
        const startTime = performance.now();
        
        if (useGPU && kernel) {
          // 使用GPU版本（复用数组）
          if (inputArrayRef.current.length === 0) {
            inputArrayRef.current = Array.from({ length: height }, () =>
              Array.from({ length: width }, () => [0, 0, 0, 0])
            );
          }
          
          // 直接修改现有数组
          for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
              const idx = (y * width + x) * 4;
              const pixel = inputArrayRef.current[y][x];
              pixel[0] = frame.data[idx];
              pixel[1] = frame.data[idx + 1];
              pixel[2] = frame.data[idx + 2];
              pixel[3] = frame.data[idx + 3];
            }
          }
          
          const out = kernel(
            inputArrayRef.current,
            backgroundColor[0],
            backgroundColor[1],
            backgroundColor[2],
            threshold,
            edgePadding
          ) as number[][][];

          if (!outFrameRef.current) {
            outFrameRef.current = ctx.createImageData(width, height);
          }
          
          for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
              const idx = (y * width + x) * 4;
              const [r, g, b, a] = out[y][x];
              outFrameRef.current.data[idx] = r;
              outFrameRef.current.data[idx + 1] = g;
              outFrameRef.current.data[idx + 2] = b;
              outFrameRef.current.data[idx + 3] = a;
            }
          }
          
          processedFrame = outFrameRef.current;
        } else {
          // 使用纯JavaScript版本（更快）
          processedFrame = processFrameJS(frame);
        }
        
        ctx.putImageData(processedFrame, 0, 0);
        
        // 性能调试信息
        const endTime = performance.now();
        if (frameCountRef.current % 60 === 0) { // 每60帧显示一次
          console.log(`${useGPU ? 'GPU' : 'CPU'}模式处理时间: ${(endTime - startTime).toFixed(2)}ms`);
        }
        
        // 如果启用了自动适应，计算内容区域（降低频率）
        if (autoFit && Math.random() < 0.1) {
          const bounds = calculateContentBounds(processedFrame);
          setContentBounds(bounds);
        }
      } catch (error) {
        console.error('渲染错误:', error);
      }

      animationId = requestAnimationFrame(render);
    };

    // 视频事件处理
    const handleCanPlay = () => {
      setIsVideoReady(true);
      if (!isRendering) {
        render();
      }
    };

    const handlePlay = () => {
      if (!isRendering) {
        render();
      }
    };

    const handlePause = () => {
      isRendering = false;
      cancelAnimationFrame(animationId);
    };

    const handleEnded = () => {
      isRendering = false;
      cancelAnimationFrame(animationId);
    };

    // 添加事件监听器
    video.addEventListener('canplay', handleCanPlay);
    video.addEventListener('play', handlePlay);
    video.addEventListener('pause', handlePause);
    video.addEventListener('ended', handleEnded);

    // 如果视频已经可以播放，立即开始渲染
    if (video.readyState >= 3) {
      setIsVideoReady(true);
      render();
    }

    return () => {
      video.removeEventListener('canplay', handleCanPlay);
      video.removeEventListener('play', handlePlay);
      video.removeEventListener('pause', handlePause);
      video.removeEventListener('ended', handleEnded);
      cancelAnimationFrame(animationId);
    };
  }, [src, width, height, backgroundColor, threshold, edgePadding, maintainAspectRatio, autoFit, useGPU, isVideoReady]);

  return (
    <div
      style={{
        position: 'relative',
        width,
        height,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
      }}
      className={className}
    >
      <video
        ref={videoRef}
        src={src}
        width={width}
        height={height}
        style={{ 
          position: 'absolute', 
          top: '-9999px', 
          left: '-9999px',
          width: '1px',
          height: '1px'
        }}
        crossOrigin="anonymous"
        autoPlay
        loop
        playsInline
        muted={false}
      />
      <canvas
        ref={canvasRef}
        width={width}
        height={height}
        style={!autoFit ? {
          width: autoFit && contentBounds ? contentBounds.width : (maintainAspectRatio ? 'auto' : width),
          height: autoFit && contentBounds ? contentBounds.height : (maintainAspectRatio ? 'auto' : height),
          maxWidth: '100%',
          maxHeight: '100%',
          objectFit: maintainAspectRatio ? 'contain' : 'fill',
          transform: autoFit && contentBounds ? `translate(-${contentBounds.x}px, -${contentBounds.y}px)` : 'none'
        }:{}}
      />
      {/* FPS显示 */}
      {/* <div style={{
        position: 'absolute',
        top: '5px',
        right: '5px',
        background: 'rgba(0,0,0,0.7)',
        color: 'white',
        padding: '2px 6px',
        borderRadius: '3px',
        fontSize: '12px',
        fontFamily: 'monospace',
        zIndex: 10
      }}>
        {currentFPS} FPS
      </div> */}
    </div>
  );
};

export default GreenScreenVideo;

/*
使用示例：

// 高性能模式（推荐）- 使用纯JavaScript处理
<GreenScreenVideo
  src="/path/to/video.mp4"
  backgroundColor={[238, 243, 252]}
  threshold={30}
  useGPU={false} // 使用纯JavaScript版本，性能更好
  maintainAspectRatio={true}
/>

// GPU加速模式
<GreenScreenVideo
  src="/path/to/video.mp4"
  backgroundColor={[238, 243, 252]}
  threshold={30}
  useGPU={true} // 使用GPU加速
  maintainAspectRatio={true}
/>

// 绿幕背景抠除，自动适应内容区域
<GreenScreenVideo
  src="/path/to/greenscreen.mp4"
  backgroundColor={[0, 255, 0]}
  threshold={80}
  useGPU={false}
  autoFit={true}
/>

// 自定义背景色抠除，拉伸到指定尺寸
<GreenScreenVideo
  src="/path/to/video.mp4"
  backgroundColor={[255, 0, 0]} // 红色背景
  threshold={50}
  useGPU={false}
  maintainAspectRatio={false}
/>

参数说明：
- backgroundColor: 要抠除的背景色 [R, G, B]
- threshold: 颜色容差，值越小抠除越精确
- edgePadding: 边缘透明区域宽度，用于去除视频边缘
- maintainAspectRatio: 是否保持宽高比，true时人物大小与原始视频一致
- autoFit: 是否自动适应内容区域，只显示非透明部分
- useGPU: 是否使用GPU加速，false时使用纯JavaScript版本（通常更快）

性能优化提示：
- 对于720x960分辨率，建议使用 useGPU={false} 获得更好的性能
- 纯JavaScript版本使用曼哈顿距离，比欧氏距离快3倍
- 如果视频较大，建议适当降低 width 和 height 以提高性能
- autoFit 功能会增加计算开销，建议在需要精确裁剪时使用
- threshold 值越小，计算越精确但性能消耗越大

性能分析：
为什么GPU模式帧率更低？

1. 数据传输开销：
   - CPU→GPU：每帧传输2,764,800个数字（720x960x4）
   - GPU→CPU：每帧传输2,764,800个数字
   - 总计：5,529,600个数字/帧的传输开销

2. 数据格式转换：
   - ImageData → 二维数组：691,200次对象访问
   - 二维数组 → ImageData：691,200次对象访问
   - 总计：1,382,400次对象访问/帧

3. GPU.js局限性：
   - WebGL数据类型限制
   - 编译和优化开销
   - 小规模计算时，传输开销 > 计算收益

4. 纯JavaScript优势：
   - 直接操作ImageData，零传输开销
   - 使用曼哈顿距离，计算量减少3倍
   - 预计算常量，避免重复计算
   - 内存访问模式更友好

结论：对于720x960分辨率，纯JavaScript版本通常比GPU版本快2-5倍。
*/ 